<template>
  <el-card class="box-card roles">
    <!-- 头部 面包屑 -->
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>

    <el-button type="primary" plain>添加角色</el-button>

    <!-- type='expand'> -->

    <el-table border class="mt-15" :data="rolesList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <!-- <div>{{scope.row}}</div> -->
          <!-- 第一层 -->
          <el-row v-for="(item1, index) in scope.row.children" :key="item1.id">
            <el-col :span="6">
              <el-tag closable @close="handleClose(item1, scope.row)">
                {{ item1.authName }}
              </el-tag>
              <i class="el-icon-arrow-right"></i>
            </el-col>

            <el-col :span="18">
              <el-row v-for="item2 in item1.children" :key="item2.id">
                <!-- 第二层 -->
                <el-col :span="5">
                  <el-tag
                    closable
                    type="success"
                    @close="handleClose(item2, scope.row)"
                  >
                    {{ item2.authName }}
                  </el-tag>
                  <i class="el-icon-arrow-right"></i>
                </el-col>

                <!-- 第三层 -->
                <el-col :span="19">
                  <template v-if="item2.children.length > 0">
                    <span v-for="item3 in item2.children" :key="item3.id">
                      <el-tag
                        closable
                        type="warning"
                        @close="handleClose(item3, scope.row)"
                      >
                        {{ item3.authName }}
                      </el-tag>
                      <i class="el-icon-arrow-right"></i>
                    </span>
                  </template>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" prop="roleName" width="265px">
      </el-table-column>
      <el-table-column label="描述" prop="roleDesc" width="230px">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            icon="el-icon-edit"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            plain
            icon="el-icon-delete"
          ></el-button>
          <el-button
            size="mini"
            type="warning"
            plain
            icon="el-icon-check"
            title="授权角色"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { confirmRes } from "../../api/confirm";
//   confirmRes(this)

export default {
  name: "",
  components: {},

  data() {
    return {
      rolesList: [],
    };
  },
  computed: {},
  watch: {},

  created() {
    //   第一种用法
    //   confirmRes(this)
    // 第二种用法 （面向切面编程）
    //   confirmRes(this,function(){
    //     //   alert('xxxxx')
    //     // 发送请求
    //   }).then(res=>{
    //     alert(res)
    //   })

    //调用获取所有权限列表的方法
    this.getRolesList();
  },

  methods: {
    //定义获取权限列表的方法
    async getRolesList() {
      var { data: res } = await this.$http.get("roles");
      if (res.meta.status != 200) return this.$message.error("请求数据失败");
      this.rolesList = res.data;
    },

    // 定义删除角色的对应控制权限方法
    async handleClose(tag, role) {
      let confirmRes = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        console.log("错误", err);
      });

      // console.log(confirmRes);  // 取消的undefinde   确认是 confirm
      if (!confirmRes)
        return this.$message({ type: "info", message: "已取消删除" });

      var rightId = tag.id;
      var roleId = role.id;

      var url = `roles/${roleId}/rights/${rightId}`;
      let { data: res } = await this.$http.delete(url);
      console.log("res", res.data);

      role.children = res.data; // 直接删除
    },
  },
};
</script>

<style scoped  lang="less">
.roles {
  .el-tag {
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .tree-container {
    height: 300px;
    overflow: auto;
  }

  .el-col {
    //   height: 40px !important;
    line-height: 60px !important;
  }
}
</style>
